<template>
  <div id="header">
    <div class="container">
      <div class="logo" @click="goHome">
        <div class="icon"></div>
        <div class="logo_content">BF-Design</div>
      </div>
      <ul class="nav">
        <router-link to="/zh-CN/guide/introduce">
          <li :class="headAct==0?'head-act':''" @click="toClick(0)">介绍</li>
        </router-link>
        <router-link to="/zh-CN/guide/start">
          <li :class="headAct==1?'head-act':''" @click="toClick(1)">起步</li>
        </router-link>
        <router-link to="/zh-CN/component">
          <li :class="headAct==2?'head-act':''" @click="toClick(2)">组件</li>
        </router-link>
        <router-link to="/zh-CN/guide/joinLabour">
          <li :class="headAct==3?'head-act':''" @click="toClick(3)">贡献</li>
        </router-link>
        <!-- 预留 -->
        <bf-dropdown style="margin: 0 10px;" :hide-on-click="false" :renderHtml="false">
          <div style="display: flex;align-items: center;color:#999;">
            简体中文
            <img
              style="width:14px;height:14px;margin-left:5px;"
              src="../assets/svg/down.svg"
              alt
            />
          </div>
          <bf-dropdownMenu slot="menu">
            <bf-dropdownMain name="1">简体中文</bf-dropdownMain>
            <bf-dropdownMain name="2" divided>English</bf-dropdownMain>
          </bf-dropdownMenu>
        </bf-dropdown>
        <a href="https://github.com/Buried-Love/BF-Design-Ui" target="_black">
          <li class="github" style="margin:0 10px">
            <bf-tooltip style="line-height: 25px;" placement="bottom" content="GitHub">
              <img src="../assets/svg/github.svg" alt />
            </bf-tooltip>
          </li>
        </a>
        <a href="https://gitee.com/Buried-LoveBoy/bf-design-ui" target="_black">
          <li class="gitee">
            <bf-tooltip style="line-height: 25px;" placement="bottom" content="Gitee">
              <img src="../assets/svg/gitee.svg" alt />
            </bf-tooltip>
          </li>
        </a>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      headAct: 0,
    };
  },
  computed: {},
  methods: {
    goHome() {
      this.$router.push({
        path: "/",
      });
    },
    toClick(index) {
      this.headAct = index;
    },
    ifRouteName() {
      switch (this.$route.name) {
        case "introduce":
          this.headAct = 0;
          return;
        case "start":
          this.headAct = 1;
          return;
        case "joinLabour":
          this.headAct = 3;
          return;
        default:
          this.headAct = 2;
          break;
      }
    },
  },
  created() {
    this.ifRouteName();
  },
  mounted() {},
};
</script>
<style lang='scss'>
#header {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  line-height: 80px;
  color: #000;
  box-shadow: 0 2px 8px #f0f1f2;
  z-index: 100;
  .container {
    display: flex;
    justify-content: space-between;
    width: 1260px;
    height: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    .logo {
      display: flex;
      align-items: center;
      width: 210px;
      height: 80px;
      cursor: pointer;
      .icon {
        width: 30px;
        height: 30px;
        margin-right: 8px;
        background: url("../assets/logo.png") no-repeat center;
        background-size: 100% 100%;
      }
      .logo_content {
        font-size: 24px;
        font-weight: bold;
        color: #1a2b3b;
        font-family: webfont, sans-serif;
        letter-spacing: -0.18px;
        white-space: nowrap;
        text-decoration: none;
      }
    }
    .nav {
      display: flex;
      height: 100%;
      line-height: 80px;
      background: transparent;
      padding: 0;
      margin: 0;
      li {
        width: 70px;
        height: 100%;
        font-size: 14px;
        text-align: center;
        color: #999;
        list-style: none;
        cursor: pointer;
      }
      .head-act {
        color: #1a1a1a;
        transition-duration: 0.3s;
        transition-timing-function: ease;
        transition-delay: 0s;
        &:after {
          position: relative;
          top: -3px;
          left: 17px;
          display: block;
          width: calc(100% - 35px);
          height: 3px;
          background: #1a1a1a;
          content: "";
        }
      }
      .github {
        width: 22px;
        height: 22px;
        margin-right: 5px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
          margin-top: 28px;
        }
      }
      .gitee {
        width: 22px;
        height: 22px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
          margin-top: 28px;
        }
      }
    }
  }
}
</style>